<script lang="ts" setup>
import BlurCard from '@/components/BlurCard.vue'
import { onMounted, ref } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { loginPost } from '@/api'
import { useRouter } from 'vue-router'
import type { ILoginPost } from '@/typed/request'
import { getAuthCode } from '@/utils'
import { TOKEN_NAME } from '@/const'

const router = useRouter()
const formRef = ref<FormInst | null>(null)
const loading = ref(false)
const saveLoginName = ref(0)
const codeImg = ref<string | undefined>('')
const imgBg = ref<string | undefined>('')
const model = ref<ILoginPost>({
	loginName: localStorage.getItem('loginName') || '',
	password: '',
	code: '',
	uuid: ''
})
const defaultPlaceholder = {
	loginName: '请输入账号',
	password: '请输入密码',
	code: '请输入验证码',
	saveName: '记住用户名'
}
const rules: FormRules = {
	loginName: [
		{
			required: true,
			message: defaultPlaceholder.loginName
		}
	],
	password: [
		{
			required: true,
			message: defaultPlaceholder.password
		}
	],
	code: [
		{
			required: true,
			message: defaultPlaceholder.code
		}
	]
}

onMounted(async () => {
	await getCodeImg()
})

const submit = (e: MouseEvent) => {
	e.preventDefault()
	formRef.value?.validate(async (errors) => {
		if (!errors) {
			loading.value = true
			const {code, data} = await loginPost(model.value)
			loading.value = false
			if (code === 200) {
				localStorage.setItem('loginName', model.value.loginName)
				localStorage.setItem(TOKEN_NAME, data.token)
				await router.replace('/console')
				window.$message.success('登录成功')
			} else {
				await getCodeImg()
			}
		}
	})
}

async function getCodeImg() {
	const {src, uuid, background} = await getAuthCode()
	codeImg.value = src || ''
	imgBg.value = background
	model.value.uuid = uuid || ''
}
</script>

<template>
	<div class="page">
		<div class="container">
			<BlurCard class="login">
				<h1>账号密码登录</h1>
				<n-form
					ref="formRef"
					:model="model"
					:rules="rules"
					label-align="right"
					label-placement="left"
					label-width="100"
					size="large"
				>
					<n-form-item path="loginName">
						<n-input
							v-model:value="model.loginName"
							:placeholder="defaultPlaceholder.loginName"
						/>
					</n-form-item>
					<n-form-item path="password">
						<n-input
							v-model:value="model.password"
							:placeholder="defaultPlaceholder.password"
							type="password"
						/>
					</n-form-item>
					<n-form-item path="code">
						<n-input
							v-model:value="model.code"
							:disabled="loading"
							:placeholder="defaultPlaceholder.code"
							@keyup.enter="submit"
						/>
					</n-form-item>
					<n-form-item :show-feedback="false">
						<img
							:src="codeImg"
							class="codeImg"
							@click="getCodeImg"
						/>
					</n-form-item>
					<n-form-item>
						<n-checkbox v-model:value="saveLoginName">{{ defaultPlaceholder.saveName }}
						</n-checkbox>
					</n-form-item>
					<n-row :gutter="[0, 24]">
						<n-col :span="24">
							<div style="display: flex; justify-content: center">
								<n-button
									:disabled="!model.loginName || !model.password || !model.code || !model.uuid"
									:loading="loading"
									block
									round
									size="large"
									type="primary"
									@click="submit"
								>
									登录
								</n-button>
							</div>
						</n-col>
					</n-row>
				</n-form>
			</BlurCard>
		</div>
	</div>
</template>
<style lang="less" scoped>
.page {
	min-height: 100vh;
	background-image: url(/images/bg1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	display: flex;
	align-items: center;

	.container {
		display: flex;
		justify-content: flex-end;
	}

	.login {
		width: 500px;
		padding: 20px 50px 40px 50px;

		h1 {
			margin-bottom: 30px;
			text-align: center;
		}

		.codeImg {
			width: 100%;
			height: 60px;
			background-color: var(--text-color-1);
			cursor: pointer;
			border-radius: 4px;
		}
	}
}

@media (max-width: 768px) {
	.page {
		.login {
			width: calc(100% - 2rem);
			margin: 0 auto;
		}
	}
}</style>
